<template>
  <div class="sop-table-wrap">
    <div class="card-head">
      <div class="search-rows">
        <el-button type="primary" size="small" v-hasPermi="['sop:add']" @click="onNavigationTo('/single/sop/add')">
          <i class="el-icon-plus"></i>
          标准SOP
        </el-button>
        <el-select v-model="value" placeholder="任务状态" size="small">
          <el-option v-for="item in taskList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="创建开始日期"
          end-placeholder="创建结束日期" size="small" style="width: 300px;">
        </el-date-picker>
        <el-input class="search-input" size="small" placeholder="搜手机号" suffix-icon="el-icon-search" />
        <el-select v-model="value" placeholder="状态" size="small">
          <el-option v-for="item in accountList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
        <div slot="content">手动选择发送对象（客户、客户群）<br />并调用标准模板创建的SOP计划任<br />务，即选定的对象同时生成该SOP计<br />划任务，并按每天设定的时间进行发<br />送。
        </div>
        <span class="tolltip-text">标准SOP是什么？</span>
      </el-tooltip>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="ID" width="120">
      </el-table-column>
      <el-table-column prop="date" label="模版">
      </el-table-column>
      <el-table-column prop="name" label="创建时间">
      </el-table-column>
      <el-table-column prop="name" label="创建人">
      </el-table-column>
      <el-table-column prop="name" label="执行时间">
      </el-table-column>
      <el-table-column prop="date" label="生效企微号">
      </el-table-column>
      <el-table-column prop="date" label="状态">
      </el-table-column>
      <el-table-column prop="date" label="操作">
        <el-button  type="text" size="small" v-hasPermi="['singleSOP:modelView']">模板详情</el-button>
        <el-button  type="text" size="small" v-hasPermi="['singleSOP:taskView']">任务详情</el-button>
      </el-table-column>
      <template slot="empty">
        <TableEmpty />
      </template>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      taskList: [
        { value: '1', label: '创建中' },
        { value: '2', label: '下发中' },
        { value: '3', label: '下发完成' },
        { value: '6', label: '已取消' }
      ],
      accountList: [
        { value: '', label: '全部' },
        { value: '1', label: '员工1' },
        { value: '2', label: '员工2' },
        { value: '3', label: '员工3' }
      ],
      tableData: []
    }
  },
  methods: {
    onNavigationTo(path) {
      this.$router.push(path)
    },
  },
}
</script>
<style lang="scss" scoped>
.sop-table-wrap {
  background: #fff;
  width: 100%;

  .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;

    .search-rows {
      display: grid;
      column-gap: 8px;
      grid-template-columns: 112px 180px 300px 180px 140px;
    }

    .tolltip-text {
      color: #3070ff;
      font-size: 14px;
      line-height: 22px;
    }
  }
}
</style>
